<template>
  <a-card class="general-card" title="店铺结算" :bordered="false">
    <a-tabs @change="(val)=>{apiParams.billStatus = val}" :default-active-key="billStatusVar">
      <a-tab-pane key="OUT" title="待对账"></a-tab-pane>
      <a-tab-pane key="CHECK" title="待结算"></a-tab-pane>
      <a-tab-pane key="COMPLETE" title="已完成"></a-tab-pane>
    </a-tabs>
    <!-- 搜索 -->
    <PickSearchColumn :columns="columnsSearch" @reset="(val) => {apiParams = {...apiParams, ...val}}" @search="(val) => {apiParams = {...apiParams, ...val}}">
    </PickSearchColumn>
    <!-- 表格 -->
    <PickTablePage ref="tablePageRef" :columns="columnsTable" :methods="sortMethods" :api="getBuyBillPage" @detail="detailed" :api-params="apiParams" :bordered="true">
      <template #time="{ data }">{{ data.startTime }}<span style="margin: 0 10px">-</span>{{ data.endTime }}</template>
    </PickTablePage>
  </a-card>
</template>

<script setup lang="ts">
import { PickSearchColumn, PickTablePage } from '@pickmall/ui-v3-components';

import { SearchRule, MethodsRule, ColumnsDataRule } from '@/types/global';
import { getBuyBillPage } from '@/api/shops';
import {
  billStatus,
  selfOperated,
} from '@/utils/tools';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const tablePageRef = ref('');
const billStatusVar = ref<string>('COMPLETE');
const apiParams = ref<any>({billStatus:billStatusVar.value});
// 查询海选列表
const columnsSearch: Array<SearchRule> = [
  {
    label: '账单编号',
    model: 'sn',
    disabled: false,
    input: true,
  },
  {
    label: '出帐时间',
    disabled: false,
    datePicker: {
      type: 'range',
    },
  },
];

// 表格搜索列表
const columnsTable: ColumnsDataRule[] = [
  {
    title: '账单号',
    dataIndex: 'sn',
    width: 300,
  },
  {
    title: '生成时间',
    dataIndex: 'createTime',
    width: 160,
  },
  {
    title: '结算时间段',
    ellipsis: false,
    dataIndex: 'startTime',
    slot: true,
    slotTemplate: 'time',
    width: 250,
  },

  {
    title: '店铺名称',
    dataIndex: 'storeName',
    width: 160,
  },
  {
    title: '结算金额',
    dataIndex: 'billPrice',
    width: 160,
    currency: true,
  },
  {
    title: '状态',
    dataIndex: 'billStatus',
    slot: true,
    width: 100,
    slotData: {
      badge: billStatus,
    },
  },
];
// 操作列表
const sortMethods: MethodsRule = {
  title: '操作',
  width: 200,
  methods: [
    {
      title: '详细',
      callback: 'detail',
      type:'text',
      status:'success'
    },
  ],
};
// 详细
const detailed = (v: any) => {
  localStorage.setItem('settleID', v.record.id)
  router.push({
    name: 'bill-detail', query: {
      id: v.record.id
    }
  })
}
</script>

<style scoped></style>
